<template>
  <div class="config-content" >
    <x-from id="configForm" ref="from" :form-data="data.arr" :form-value="data.value" :form-config="{labelPosition: 'top'}" @change="setValue" />
  </div>
</template>
<script>
import xFrom from './formBox'
import formSettingData from './formSetting.js'
// import formItemData from './formItem.js'

export default {
  components: {
    xFrom
  },
  props: {

  },
  data() {
    return {
      show: false,
      title: '',
      data: [],
      dataTemp: null,
      EleIndex: null
    }
  },
  computed: {

  },
  created() {
    this.data = this.initComponentData(formSettingData)
  },
  methods: {
    setValue(e) {
      // this.$emit('setConfig', e)
      this.$refs.from.setConfig(e)
    }
  }
}
</script>
<style>
  .config-content-input{
     margin-bottom: 0;
  }
</style>
<style lang='scss' scoped>
.config-content{
    width: 90%;
    margin: 0 auto;
    .config-back{
        cursor:Pointer;
        width: 14px;
        height: 100%;
        color:#188ae2;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        &::after{
          content:'';
          display: inline-block;
          height: 100%;
          width: 100%;
          background: #f2f2f2;
          position: absolute;
          right: 0;
          top: 0;
        }
        &::before{
          position: absolute;
          top: 50%;
          right: 0;
          z-index: 2;
        }
    }
    &.config-close{
      left:-100%;
    }
  }
  </style>

